import { ProForm, ProFormDigit, ProFormInstance, ProFormItem, ProFormText } from '@/components/Pro';
import { useIntl } from '@umijs/max';
import { Col, Input, Row, Space } from 'antd';
import React, { useEffect, useRef } from 'react';

type IProps = {
  DCInfo: API.DcInfoDTO | undefined;
  deviceType: string | undefined;
};
const DCParams: React.FC<IProps> = (props) => {
  const { DCInfo, deviceType } = props;
  const intl = useIntl();
  const formRef = useRef<ProFormInstance>(null);
  useEffect(() => {
    formRef?.current?.setFieldsValue(DCInfo);
  }, [DCInfo]);
  return (
    <>
      <ProForm
        formRef={formRef}
        layout={'horizontal'}
        disabled={true}
        colon={false}
        submitter={false}
        labelCol={{
          span: 8,
        }}
      >
        {deviceType === 'PCS' ? (
          <>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.ratedPower' })}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  name={'ratedPower'}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.maxPower' })}
                  name={'powerMax'}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.dcVoltageRange' })}
                  required={true}
                >
                  <Space>
                    <Input suffix={<span>V</span>} value={DCInfo?.volMin}></Input>
                    <span>-</span>
                    <Input suffix={<span>V</span>} value={DCInfo?.volMax}></Input>
                  </Space>
                </ProFormItem>
              </Col>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.voltageRegulationAccuracy' })}
                  name={'volRipple'}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.currentRegulationAccuracy' })}
                  name={'curRipple'}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
            </Row>
          </>
        ) : (
          <>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.ratedPower' })}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  name={'ratedPower'}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
              <Col span={12}>
                <ProFormText label={intl.formatMessage({ id: 'device.cellType' })} required={true}>
                  <Space>
                    <ProFormDigit
                      name={'cellVol'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'V',
                      }}
                    />
                    <span>/</span>
                    <ProFormDigit
                      name={'cellCap'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'Ah',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedCap'}
                  label={intl.formatMessage({ id: 'device.ratedCapacity' })}
                  rules={[{ required: true, message: '请输入额定容量' }]}
                  fieldProps={{
                    addonAfter: 'kWh',
                  }}
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  label={intl.formatMessage({ id: 'device.systemConfiguration' })}
                  required={true}
                >
                  <Space>
                    <ProFormDigit
                      name={'sysP'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'P',
                      }}
                    />
                    <span>/</span>
                    <ProFormDigit
                      name={'sysS'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'S',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedVol'}
                  label={intl.formatMessage({ id: 'device.ratedVoltage' })}
                  rules={[{ required: true, message: '请输入额定电压' }]}
                  fieldProps={{
                    addonAfter: 'V',
                  }}
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  label={intl.formatMessage({ id: 'device.dcVoltageRange' })}
                  required={true}
                >
                  <Space>
                    <ProFormDigit name={'volMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit
                      name={'volMax'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'V',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormDigit
                  name={'rate'}
                  label={intl.formatMessage({ id: 'device.ratedChargeDischargeRate' })}
                  rules={[{ required: true, message: '请输入额定充放电倍率' }]}
                  fieldProps={{
                    addonAfter: 'C',
                  }}
                />
              </Col>
            </Row>
          </>
        )}
      </ProForm>
    </>
  );
};
export default DCParams;
